<!--
    沐辰个人主页 - 404错误页面 (Muchen Personal Homepage - 404 Error Page)

    Copyright (c) 2025 沐辰 (MC)

    项目描述：个人主页的404错误页面，提供友好的错误提示和导航
    作者：沐辰 (MC)
    邮箱：mcwlgzs@qq.com
    网站：https://mcwl.net
    GitHub：https://github.com/mcwlgzs/mc-homepage

    本文件基于 MIT 许可证开源，详情请查看项目根目录的 LICENSE 文件
-->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>404错误 - 页面未找到 | 沐辰个人网站 - 全栈开发工程师技术分享平台</title>
    <meta name="description" content="404错误页面 - 您访问的页面不存在或已被移动。沐辰个人网站为您提供友好的错误提示和快速导航。返回首页继续浏览全栈开发工程师的技术分享、项目展示和专业服务。我们致力于为用户提供最佳的浏览体验和技术支持。">
    <meta name="robots" content="noindex, nofollow">
    
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    
    <!-- Favicon -->
    <link rel="shortcut icon" href="./assets/images/favicon.ico" type="image/x-icon">
    
    <style>
        .gradient-bg {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        }
        .floating {
            animation: floating 3s ease-in-out infinite;
        }
        @keyframes floating {
            0%, 100% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
        }
        .bounce-in {
            animation: bounceIn 1s ease-out;
        }
        @keyframes bounceIn {
            0% { transform: scale(0.3); opacity: 0; }
            50% { transform: scale(1.05); }
            70% { transform: scale(0.9); }
            100% { transform: scale(1); opacity: 1; }
        }
    </style>
</head>
<body class="gradient-bg min-h-screen flex items-center justify-center p-4">
    <!-- 主标题 - 404错误页面 -->
    <h1 class="sr-only">404错误 - 页面未找到 | 沐辰个人网站</h1>

    <div class="max-w-md w-full">
        <div class="bg-white rounded-2xl shadow-2xl p-8 text-center bounce-in">
            <!-- 404图标 -->
            <div class="floating mb-6">
                <div class="w-24 h-24 mx-auto bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-4xl font-bold shadow-lg">
                    404
                </div>
            </div>

            <!-- 标题 -->
            <h2 class="text-3xl font-bold text-gray-800 mb-4">页面未找到</h2>
            
            <!-- 描述 -->
            <p class="text-gray-600 mb-8 leading-relaxed">
                抱歉，您访问的页面不存在或已被移动。<br>
                请检查URL是否正确，或返回首页继续浏览。
            </p>
            
            <!-- 按钮组 -->
            <div class="space-y-4">
                <a href="/" class="block w-full bg-gradient-to-r from-blue-500 to-purple-600 text-white py-3 px-6 rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 transition-all duration-300 transform hover:scale-105 shadow-lg">
                    <i class="fas fa-home mr-2"></i>
                    返回首页
                </a>
                
                <button onclick="history.back()" class="block w-full bg-gray-100 text-gray-700 py-3 px-6 rounded-lg font-medium hover:bg-gray-200 transition-all duration-300">
                    <i class="fas fa-arrow-left mr-2"></i>
                    返回上一页
                </button>
            </div>
            
            <!-- 搜索建议 -->
            <div class="mt-8 pt-6 border-t border-gray-200">
                <p class="text-sm text-gray-500 mb-4">您可能在寻找：</p>
                <div class="flex flex-wrap gap-2 justify-center">
                    <a href="/#about" class="text-xs bg-blue-50 text-blue-600 px-3 py-1 rounded-full hover:bg-blue-100 transition-colors">关于我</a>
                    <a href="/#skills" class="text-xs bg-green-50 text-green-600 px-3 py-1 rounded-full hover:bg-green-100 transition-colors">技能专长</a>
                    <a href="/#projects" class="text-xs bg-purple-50 text-purple-600 px-3 py-1 rounded-full hover:bg-purple-100 transition-colors">项目展示</a>
                    <a href="/#contact" class="text-xs bg-orange-50 text-orange-600 px-3 py-1 rounded-full hover:bg-orange-100 transition-colors">联系方式</a>
                </div>
            </div>
        </div>
        
        <!-- 底部信息 -->
        <div class="text-center mt-6">
            <p class="text-white text-sm opacity-80">
                © 2025 <a href="https://mcwl.net" class="text-white hover:text-blue-200 transition-colors duration-300">沐辰 (MC)</a>. All rights reserved.
            </p>
            <p class="text-white text-xs opacity-60 mt-1">
                基于 <a href="https://github.com/mcwlgzs/mc-homepage" target="_blank" rel="noopener" class="text-white hover:text-blue-200 transition-colors duration-300">沐辰个人主页</a> 项目 | MIT 许可证
            </p>
            <!-- ICP备案信息 -->
            <div class="icp-info text-white text-xs opacity-60 mt-2">
                <a href="http://beian.miit.gov.cn" target="_blank" rel="noopener" class="inline-flex items-center hover:text-blue-200 transition-colors duration-300">
                    <img src="./assets/images/icp-icon.svg" alt="ICP备案图标" class="w-4 h-4 mr-1">
                    京ICP备2025060520号
                </a>
                <span class="mx-1">|</span>
                <a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=52010302008888" target="_blank" rel="noopener" class="inline-flex items-center hover:text-blue-200 transition-colors duration-300">
                    <img src="./assets/images/police-icon.svg" alt="公安备案图标" class="w-4 h-4 mr-1">
                    京公网安备52010302008888号
                </a>
            </div>
        </div>
    </div>

    <!-- 背景装饰 -->
    <div class="fixed inset-0 overflow-hidden pointer-events-none">
        <div class="absolute -top-40 -right-40 w-80 h-80 bg-white opacity-10 rounded-full"></div>
        <div class="absolute -bottom-40 -left-40 w-80 h-80 bg-white opacity-10 rounded-full"></div>
        <div class="absolute top-1/2 left-1/4 w-20 h-20 bg-white opacity-20 rounded-full floating" style="animation-delay: -1s;"></div>
        <div class="absolute top-1/3 right-1/4 w-16 h-16 bg-white opacity-20 rounded-full floating" style="animation-delay: -2s;"></div>
    </div>

    <script>
        // 自动记录404错误（如果有分析工具）
        if (typeof gtag !== 'undefined') {
            gtag('event', 'page_view', {
                page_title: '404 Error',
                page_location: window.location.href
            });
        }
        
        // 添加键盘快捷键
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Enter' || e.key === ' ') {
                window.location.href = '/';
            } else if (e.key === 'Escape') {
                history.back();
            }
        });
    </script>
</body>
</html>
